<template>
  <el-drawer v-model="drawer" :with-header="false" @close="close" :append-to-body="true" :size="size" ref="drawerRef">
    <div class="recruit-post-detail" ref="recruitPostDetail">
      <el-row>
        <el-col :span="18" style="display: flex">
          <el-icon class="title-icon">
            <ele-Briefcase/>
          </el-icon>
          <div>
            <div style="color: #AAAAAA;font-size: 18px">职位</div>
            <h2>{{ formData.name }}</h2>
          </div>
        </el-col>
        <el-col :span="6" style="line-height: 51px">
          <el-button type="danger" size="default" v-if="formData.state === '1'" @click="stateChange('0')">停止招聘</el-button>
          <el-button type="success" size="default" v-else @click="stateChange('1')">恢复招聘</el-button>
          <el-button type="primary" size="default" @click="openEdit">编辑</el-button>
        </el-col>
      </el-row>

      <el-tabs v-model="tabName">
        <el-tab-pane label="详细资料" name="info">
          <el-row>
            <el-col :span="12">
              <div class="tab-info-item">
                <span class="item-left">职位名称</span>
                <span class="item-right">{{ formData.name }}</span>
              </div>
              <div class="tab-info-item">
                <span class="item-left">工作性质</span>
                <span class="item-right" v-for="dict in dictMap['StaffType']" :key="dict.value" v-show="dict.value === formData.type">
                  {{ dict.name }}
                </span>
              </div>
              <div class="tab-info-item">
                <span class="item-left">招聘原因</span>
                <span class="item-right">{{ formData.reason }}</span>
              </div>
              <div class="tab-info-item">
                <span class="item-left">招聘人数</span>
                <span class="item-right">{{ formData.num }}</span>
              </div>
              <div class="tab-info-item">
                <span class="item-left">学历要求</span>
                <span class="item-right" v-for="item in dictMap['EducationLevel']" :key="item.value" v-show="item.value === formData.eduLevel">
                  {{ item.name }}
                </span>
              </div>
              <div class="tab-info-item">
                <span class="item-left">语言要求</span>
                <span class="item-right">{{ languages }}</span>
              </div>
              <div class="tab-info-item">
                <span class="item-left">最迟到岗时间</span>
                <span class="item-right">{{ formData.latestWorkDate }}</span>
              </div>
              <div class="tab-info-item">
                <span class="item-left">紧急程度</span>
                <span class="item-right">{{ formData.urgentLevel === '0' ? '一般' : '紧急' }}</span>
              </div>
              <div class="tab-info-item">
                <span class="item-left">职位描述</span>
                <span class="item-right">{{ formData.remark }}</span>
              </div>
              <div class="tab-info-item">
                <span class="item-left">招聘状态</span>
                <span class="item-right">{{ formData.state === '1' ? '招聘中' : '已停止招聘' }}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="tab-info-item">
                <span class="item-left">用人部门</span>
                <span class="item-right">{{ formData.oaDeptName }}</span>
              </div>
              <div class="tab-info-item">
                <span class="item-left">招聘负责人</span>
                <span class="item-right">{{ formData.liableName }}</span>
              </div>
              <div class="tab-info-item">
                <span class="item-left">面试官</span>
                <span class="item-right">{{ interviewerNames }}</span>
              </div>
              <div class="tab-info-item">
                <span class="item-left">已入职人数</span>
                <span class="item-right">{{ formData.joinedNum }}</span>
              </div>
              <div class="tab-info-item">
                <span class="item-left">工作经验</span>
                <span class="item-right" v-for="item in dictMap['WorkExperience']" :key="item.value" v-show="item.value === formData.experience">
                  {{ item.name }}
                </span>
              </div>
              <div class="tab-info-item">
                <span class="item-left">薪资范围</span>
                <span class="item-right" v-if="formData.salaryInterview === '1'">面谈</span>
                <span class="item-right" v-else>
                  {{ formData.salaryStart }} ~ {{ formData.salaryEnd }}
                  <span v-for="dict in dictMap['SalaryTimeType']" :key="dict.value" v-show="dict.value === formData.salaryTimeType">{{ ' ' + dict.name }}</span>
                </span>
              </div>
              <div class="tab-info-item">
                <span class="item-left">年龄要求</span>
                <span class="item-right" v-if="formData.ageRequire === '1'">不限</span>
                <span class="item-right" v-else>{{ formData.ageStart }} ~ {{ formData.ageEnd }}</span>
              </div>
              <div class="tab-info-item">
                <span class="item-left">工作城市</span>
                <span class="item-right">{{ formData.workLocation || '--' }}</span>
              </div>
              <div class="tab-info-item">
                <span class="item-left">工作地点</span>
                <span class="item-right">{{ formData.workAddress || '--' }}</span>
              </div>
              <div class="tab-info-item">
                  <span class="item-left">名片中展示</span>
                  <span class="item-right">{{ formData.showCard === 1 ? '是' : '否' }}</span>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-drawer>
</template>

<script>
import {computed, toRefs, watch, reactive, onMounted} from 'vue'
import {changeRecruitState} from '/@/api/oa/recruit/post'
import {ElMessageBox} from 'element-plus'

export default {
  name: 'RecruitPostDetail',
  props: {
    detailVisible: {
      type: Boolean,
      default: false
    },
    defaultForm: {
      type: Object,
      default() {
        return {}
      }
    },
    dictMap: {
      type: Object,
      default() {
        return {}
      }
    },
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  setup(props, context) {
    const {detailVisible, defaultForm, dictMap} = toRefs(props)
    let drawer = computed({
      get: () => detailVisible.value,
      set: (val) => {
        context.emit('update:detailVisible', val)
      }
    })
    watch(() => detailVisible.value, val => {
      context.emit('update:detailVisible', val)
      if (val) {
        getLanguages()
        getInterviewers()
      }
    })
    let formData = computed({
      get: () => defaultForm.value,
      set: (val) => {
        context.emit('update:formData', val)
      }
    })
    watch(() => defaultForm.value, val => {
      context.emit('update:formData', val)
    })
    const state = reactive({
      tabName: 'info',
      size: '80%',
      languages: '',
      interviewerNames: ''
    })
    const getLanguages = () => {
      state.languages = ''
      if (formData.value.languageRequire) {
        formData.value.languageRequire.split(',').forEach(language => {
          let languageList = props.dictMap['Languages']
          for (let dict in languageList) {
            if (languageList[dict].value === language) {
              if (state.languages.length > 0) {
                state.languages += ','
              }
              state.languages += languageList[dict].name
              break
            }
          }
        })
      }
    }
    const getInterviewers = () => {
      state.interviewerNames = ''
      if (formData.value.interviewerList) {
        formData.value.interviewerList.forEach(interviewer => {
          if (state.interviewerNames.length > 0) {
            state.interviewerNames += ','
          }
          state.interviewerNames += interviewer.nickname
        })
      }
    }
    const openEdit = () => {
      context.emit('update:dialogVisible', true)
    }
    const getSize = () => {
      if (document.body.clientWidth <= 1400) {
        return '1100px'
      } else {
        return '85%'
      }
    }
    const close = () => {
      context.emit('update:detailVisible', false)
    }
    const stateChange = state => {
      ElMessageBox.confirm(
          '确定' + (state === '1' ? '重新开启' : '停止') + '职位招聘？',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
      ).then(async () => {
        await changeRecruitState({
          id: formData.value.id,
          state: state
        })
        formData.value.state = state
      }).catch(() => {
      })
    }
    onMounted(() => {
      window.onresize = () => {
        state.size = getSize()
      }
    })
    return {
      drawer,
      formData,
      dictMap,
      ...toRefs(state),
      close,
      openEdit,
      getLanguages,
      getInterviewers,
      stateChange
    }
  }
}
</script>

<style lang="scss" scoped>
.recruit-post-detail {
  padding: 10px;

  :deep .el-tabs__item {
    margin-top: 10px;
    font-size: 16px;
  }

  .title-icon {
    padding: 5px;
    margin: 7px 5px 3px;
    font-size: 40px;
    background-color: #CCCCCC;
  }

  .tab-info-item {
    margin: 20px 20px 0;

    .item-left {
      color: #42526E;
      width: 120px;
      display: inline-block;
    }

    .item-right {
      color: #172B4D;
    }
  }
}
</style>
